<!--围栏地图页-->
<template>
  <div style="height: 6vh;background-color:#fff;padding:10px 20px;">
    <span style="line-height:60px;font-size:20px;">新增围栏</span>
    <el-button type="primary" style="float:right;margin-top:13px;"
               @click="router.push('/geofence')">返回</el-button>
  </div>
  <!-- 第6步:创建地图容器元素 -->
  <div id="mapContainer" style="width: 100%; height:84vh;"></div>
  <!-- 新增电子围栏弹窗 -->
  <el-dialog v-model="dialogVisible" title="围栏信息" :before-close="closeDialog">
    <el-form  label-width="80px">
      <el-form-item label="围栏名称">
        <el-input v-model="geofence.name" placeholder="请输入围栏名称"></el-input>
      </el-form-item>
    </el-form>
    <template #footer>
      <span class="dialog-footer">
        <el-button @click="closeDialog">取消</el-button>
        <el-button type="primary" @click="saveGeofence">确 定</el-button>
      </span>
    </template>
  </el-dialog>
</template>

<script setup>
import router from "@/router";
import {nextTick, onMounted, ref} from "vue";
import { DrawScene, DrawControl,OperateEventType}  from "bmap-draw"
import {ElMessage} from "element-plus";
import axios from "axios";
import qs from "qs";


var map;
onMounted(()=>{
  //表示在DOM更新之后再执行,因为我们要确保上方div创建之后再给div里渲染地图
  nextTick(()=>{
    //第7步:创建地图示例,注意:不要引入,忽略提示!
    map = new BMapGL.Map("mapContainer");
    //第8步:设置中心点坐标，设置经纬度
    let point = new BMapGL.Point(116.4074, 39.9024);
    //第9步：设置地图显示的中心点与地图缩放级别
    map.centerAndZoom(point, 15);

    //添加鼠标绘制控件
    //1.创建场景类，用于添加其他绘制控件的前提准备---DrawScene
    const  scene = new DrawScene(map);
    //2.创建控件类,并将场景类传入
    const drawControl = new DrawControl(scene,{
      //3.不显示对应图标用途提示
      enableTips: false,
      //4.控件位于地图的右上角
      anchor:BMAP_ANCHOR_TOP_RIGHT,
      //5.绘制项数组：包含圆形和矩形
      drawingItems:[
          "circle",
          "rectangle"
      ]
    });
    //6.监听绘制过程，返回触发事件，如果是确定打开新增的弹窗
    scene.addEventListener(OperateEventType.COMPLETE,(event)=>{
      //10.绘制完成后点击"√"，显示新增围栏的弹窗
      dialogVisible.value = true;
      console.log(event.target);
      //7.从触发事件的目标对象中获取绘制完成的电子围栏图形元素
      let overlay =  event.target.overlay;
      //8.绘制的是圆形
      if(overlay instanceof BMapGL.Circle){
        //设置围栏类型为圆形
        geofence.value.position.genfenceType = 'circle';
        //获取圆心的经度，纬度并保存到position属性中
        geofence.value.position.longitude = overlay.getCenter().lng;
        geofence.value.position.latitude = overlay.getCenter().lat;
        //获取圆形的半径，并保存到position中
        geofence.value.position.radius = overlay.getRadius();
        console.log(geofence.value.position)
      }else{
        //绘制的是矩形
        //定义一个数组，用来存储四个顶点的坐标
        let recPoints = [];
        //依次获取矩形的四个顶点坐标保存到数组中
        for(let i = 0;i<4;i++){
          recPoints.push(overlay.points[i].latLng.lng+"-"+overlay.points[i].latLng.lat);
        }
        console.log(recPoints);
        //将数组中的元素用逗号分割，并保存到position中
        geofence.value.position.genfenceType = 'rectangle';
        geofence.value.position.recPoints = recPoints.join(",");
      }
    })
    //9.将创建好的绘制控件添加到地图中
    map.addControl(drawControl);
  })
})

//准备工作
const  dialogVisible = ref(false);
//定义一个geofence对象
const geofence = ref({
  name:'',
  position: {}
})
//新增围栏函数
const saveGeofence = ()=>{
  //判断围栏名称是否为空
  if(!geofence.value.name || geofence.value.name.trim().length==0){
    ElMessage.error("围栏名称不能为空");
    return;
  }
  //将围栏信息保存到数据库中
  let data = qs.stringify(geofence.value);
  axios.post(BASE_URL+"/v1/geofence/save",data).then((response)=>{
    if (response.data.code==2000){
      ElMessage.success("保存成功！");
      //关闭弹窗
      dialogVisible.value = false;
      //跳转到围栏管理页面
      router.push("/geofence")
    }else{
      ElMessage.error(response.data.msg)
    }
  })
}
//关闭弹窗
const closeDialog = ()=>{
  if(confirm("您确定要关闭吗？")){
    //可以直接跳转到围栏管理页面，或者还停留在新建围栏的页面
    dialogVisible.value = false;
    //清理覆盖物
    map.clearOverlays();
  }
}
</script>

<style scoped>

</style>